<!--  -->
<template>
  <div
    class="bg-[url('assets/imgs/bg.jpg')] bg-cover bg-center h-screen text-white p-5 flex overflow-hidden"
    v-if="data"
  >
    <!-- 左 -->
    <div class="flex-1 mr-5 bg-opacity-50 bg-slate-800 p-3 flex flex-col">
      <!-- 横向柱状图 -->
      <horizontalBarChart class=" h-1/3 box-border pb-4" :data="data.map(item => ({number_of_reviews: item.number_of_reviews , title : item.title}))"/>
      <!-- 散点图 -->
      <scatterChart class=" h-1/3" :data="data.map(item => ({rating : item.rating , number_of_reviews: item.number_of_reviews}))"/>
      <!-- 折线图 -->
      <lineChart class=" h-1/3" :data="data.map(item => item.year)"/>
    </div>
    
    <!-- 中 -->
    <div class="w-1/2 flex flex-col">
      <!-- 数据总览 -->
      <totalData class=" p-3 bg-opacity-50 bg-slate-800":data="data.map(item => item.category)"/>
      <!-- 地图 -->
      <mapChart class=" flex-1 p-3 mt-4 bg-opacity-50 bg-slate-800" :data="data.map(item => item.country)"/>
    </div>
    <!-- 右 -->
    <div class="flex-1 ml-5 bg-opacity-50 bg-slate-800 p-3 flex flex-col">
      <!-- 竖向柱状图 -->
      <verticalBarChart class=" h-1/3 box-border pb-4" :data="data.map(item => item.rating)"/>
      <!-- 环形图 -->
      <annotatedGraph class=" h-1/3 box-border pb-4"  :data="data.map(item => item.category)"/>
      <!-- 词云 -->
      <wordCloud class=" h-1/3" :data="data.map(item => item.director)"/>
    </div>
  </div>
</template>

<script setup>
import horizontalBarChart from "./components/horizontalBarChart.vue";
import scatterChart from "./components/scatterChart.vue";
import lineChart from "./components/lineChart.vue";
import verticalBarChart from "./components/verticalBarChart.vue";
import annotatedGraph from "./components/annotatedGraph.vue";
import wordCloud from "./components/wordCloud.vue";
import totalData from "./components/totalData.vue";
import mapChart from "./components/MapChart.vue";
import {ref ,onMounted , watch} from 'vue'
import { fetchData } from './utils/request';
const data = ref([]);

// 在组件挂载时获取数据
onMounted(async () => {
  try {
    const fetchedData = await fetchData();
    data.value = fetchedData;
  } catch (error) {
    console.error('Error fetching data:', error);
  }
});

// 监视数据变化并记录
watch(data, (newData) => {
  console.log('Data changed:', newData);
});
console.log(data);
</script>

<style lang="scss" scoped></style>
